<template>
  <div>
    <h1><router-link :to="{ name: 'MonacoEditorNPM' }">Monaco Editor</router-link></h1>
    <div id="moanco-vue-ediotr" style="height: calc(100vh - 100px);border: 2px dashed #dedede;"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor-core'
import { loadTheme, loadGrammars, loadOnigasm, setupMonacoEnv, getOrCreateModel } from '../monaco/index'
import { vueCode } from '../constants/code'
export default {
  name: 'MonacoEditor',
  data () {
    return {
      code: ''
    }
  },
  methods: {
    initMonaco (theme) {
      // const self = this
      console.log('theme.dark', theme)
      const model = getOrCreateModel(monaco.Uri.parse('file:///demo.vue'), 'vue', vueCode)
      const element = document.getElementById('moanco-vue-ediotr')
      const editorInstance = monaco.editor.create(element, {
        theme,
        model,
        automaticLayout: true,
        scrollBeyondLastLine: false,
        minimap: {
          enabled: false
        },
        inlineSuggest: {
          enabled: false
        },
        'semanticHighlighting.enabled': true
      })
      console.log('editorInstance-->', editorInstance)
      console.log('monaco-->', monaco)
      loadGrammars(monaco, editorInstance)
    }
  },
  mounted () {
    const self = this
    Promise.all([setupMonacoEnv(), loadOnigasm(), loadTheme(monaco.editor)]).then(
      ([, , theme]) => {
        self.initMonaco(theme.dark)
      }
    )
  }
}
</script>../monaco/grammars/inedx../monaco/themes/inedx
